Designing with Generative AI Course (How To) | Treehouse

بواسطة: Treehouse

Overview

Join Dan in this course as he uses generative AI to design a website for a bakery, employing the tools and methods highlighted in AI Tools for Designers.

What you'll learn

  • Project planning using generative AI tools such as ChatGPT
  • Creating sitemaps with Relume
  • Generating design inspiration in Midjourney
  • Building out the mockup in Figma

Syllabus

Project Planning with Generative AI

In this stage we will plan out our web design project.

Chevron 4 steps
  • Starting Your Project with ChatGPT

    6:34

  • Creating Sitemaps with Relume AI Site Builder

    7:21

  • Generating Design Inspiration in Midjourney

    18:15

  • Project Planning with Generative AI Quiz

    6 questions

Creating Web Designs with Generative AI

In this stage we will begin to design our website for our client.

Chevron 4 steps
  • Creating Design Layouts from Your Inspiration

    16:43

  • Building Out the Wireframe

    21:12

  • Building Out the Mockup

    32:57

  • Creating Web Designs with Generative AI Quiz

    5 questions

Taught by

Daniel Montgomery

Designing with Generative AI Course (How To) | Treehouse
الذهاب الي الدورة

Designing with Generative AI Course (How To) | Treehouse

بواسطة: Treehouse

  • Treehouse
  • مدفوعة
  • الإنجليزية
  • متاح شهادة
  • متاح في أي وقت
  • beginner
  • N/A
8.1.2PHP Version389msRequest Duration2MBMemory UsageGET ar/الدورات/{slug}Route
    • Booting (243ms)
    • Application (145ms)
    • 1 x Booting (62.5%)
      243.25ms
      1 x Application (37.26%)
      145.02ms
      14 templates were rendered
      • public.courses.show (resources/views/public/courses/show.blade.php)3bladefile
        Params
        0
        course
        1
        links
        2
        config
      • public.courses.partials.breadcrumbs (resources/views/public/courses/partials/breadcrumbs.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.courses.partials.heading (resources/views/public/courses/partials/heading.blade.php)7bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
        6
        classes
      • public.courses.partials.details (resources/views/public/courses/partials/details.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.courses.partials.breadcrumbs (resources/views/public/courses/partials/breadcrumbs.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.courses.partials.heading (resources/views/public/courses/partials/heading.blade.php)7bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
        6
        classes
      • public.layouts.main (resources/views/public/layouts/main.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.layouts.partials.meta (resources/views/public/layouts/partials/meta.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.layouts.partials.navbar (resources/views/public/layouts/partials/navbar.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.auth.profile.partials.links (resources/views/public/auth/profile/partials/links.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.auth.profile.partials.link (resources/views/public/auth/profile/partials/link.blade.php)8bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
        6
        route
        7
        title
      • public.auth.profile.partials.link (resources/views/public/auth/profile/partials/link.blade.php)8bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
        6
        route
        7
        title
      • public.auth.profile.partials.link (resources/views/public/auth/profile/partials/link.blade.php)8bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
        6
        route
        7
        title
      • public.layouts.partials.flash-session (resources/views/public/layouts/partials/flash-session.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      uri
      GET ar/الدورات/{slug}
      middleware
      web, localize:ar
      controller
      App\Http\Controllers\CourseController@show
      as
      ar.courses.show
      namespace
      prefix
      /ar
      where
      file
      app/Http/Controllers/CourseController.php:17-35
      6 statements were executed12.27ms
      • select * from `courses` where `slug_ar` = 'designing-with-generative-ai-course-(how-to)-|-treehouse' limit 1
        10.93ms/app/Http/Controllers/CourseController.php:20corspedia
        Metadata
        Bindings
        • 0. designing-with-generative-ai-course-(how-to)-|-treehouse
        Backtrace
        • 17. /app/Http/Controllers/CourseController.php:20
        • 18. /vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54
        • 19. /vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php:43
        • 20. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:260
        • 21. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:205
      • update `courses` set `visitors` = `visitors` + 1, `courses`.`updated_at` = '2025-02-10 20:12:42' where `id` = 5808
        320μs/app/Http/Controllers/CourseController.php:21corspedia
        Metadata
        Bindings
        • 0. 2025-02-10 20:12:42
        • 1. 5808
        Backtrace
        • 17. /app/Http/Controllers/CourseController.php:21
        • 18. /vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54
        • 19. /vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php:43
        • 20. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:260
        • 21. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:205
      • select `id`, `name_en`, `name_ar`, `topic_id`, `slug_en`, `slug_ar` from `subjects` where `subjects`.`id` in (37)
        240μs/app/Http/Controllers/CourseController.php:23corspedia
        Metadata
        Backtrace
        • 20. /app/Http/Controllers/CourseController.php:23
        • 21. /vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54
        • 22. /vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php:43
        • 23. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:260
        • 24. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:205
      • select `id`, `name_en`, `name_ar`, `slug_en`, `slug_ar` from `topics` where `topics`.`id` in (1)
        200μs/app/Http/Controllers/CourseController.php:23corspedia
        Metadata
        Backtrace
        • 25. /app/Http/Controllers/CourseController.php:23
        • 26. /vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54
        • 27. /vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php:43
        • 28. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:260
        • 29. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:205
      • select * from `providers` where `providers`.`id` in (60) and `providers`.`deleted_at` is null
        240μs/app/Http/Controllers/CourseController.php:23corspedia
        Metadata
        Backtrace
        • 20. /app/Http/Controllers/CourseController.php:23
        • 21. /vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54
        • 22. /vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php:43
        • 23. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:260
        • 24. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:205
      • select * from `html_files` where `html_files`.`id` = 5799 limit 1
        340μs/app/Models/Course.php:84corspedia
        Metadata
        Bindings
        • 0. 5799
        Backtrace
        • 21. /app/Models/Course.php:84
        • 28. view::public.courses.show:29
        • 30. /vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php:125
        • 31. /vendor/laravel/framework/src/Illuminate/View/Engines/PhpEngine.php:58
        • 32. /vendor/laravel/framework/src/Illuminate/View/Engines/CompilerEngine.php:72
      App\Models\HtmlFile
      1
      App\Models\Provider
      1
      App\Models\Topic
      1
      App\Models\Subject
      1
      App\Models\Course
      1
        _token
        RJaD0DjrcZ5bsa1vmIqNDTUcRdQHViF1pwbtvKyi
        locale
        ar
        _previous
        array:1 [ "url" => "https://www.corspedia.com/ar/%D8%A7%D9%84%D8%AF%D9%88%D8%B1%D8%A7%D8%AA/design...
        _flash
        array:2 [ "old" => [] "new" => [] ]
        PHPDEBUGBAR_STACK_DATA
        []
        path_info
        /ar/%D8%A7%D9%84%D8%AF%D9%88%D8%B1%D8%A7%D8%AA/designing-with-generative-ai-course-%28how-to%29-%7C-treehouse
        status_code
        200
        
        status_text
        OK
        format
        html
        content_type
        text/html; charset=UTF-8
        request_query
        []
        
        request_request
        []
        
        request_headers
        0 of 0
        array:24 [ "sec-ch-ua-mobile" => array:1 [ 0 => "?0" ] "sec-ch-ua" => array:1 [ 0 => ""HeadlessChrome";v="129", "Not=A?Brand";v="8", "Chromium";v="129"" ] "cache-control" => array:1 [ 0 => "no-cache" ] "pragma" => array:1 [ 0 => "no-cache" ] "cdn-loop" => array:1 [ 0 => "cloudflare; loops=1" ] "priority" => array:1 [ 0 => "u=0, i" ] "upgrade-insecure-requests" => array:1 [ 0 => "1" ] "user-agent" => array:1 [ 0 => "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)" ] "cf-connecting-ip" => array:1 [ 0 => "18.118.51.153" ] "accept" => array:1 [ 0 => "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7" ] "sec-fetch-site" => array:1 [ 0 => "none" ] "cf-visitor" => array:1 [ 0 => "{"scheme":"https"}" ] "sec-fetch-mode" => array:1 [ 0 => "navigate" ] "sec-fetch-user" => array:1 [ 0 => "?1" ] "x-forwarded-proto" => array:1 [ 0 => "https" ] "cf-ipcountry" => array:1 [ 0 => "US" ] "accept-encoding" => array:1 [ 0 => "gzip, br" ] "sec-fetch-dest" => array:1 [ 0 => "document" ] "sec-ch-ua-platform" => array:1 [ 0 => ""Windows"" ] "x-forwarded-for" => array:1 [ 0 => "18.118.51.153" ] "cf-ray" => array:1 [ 0 => "90fec16888b2f157-ORD" ] "host" => array:1 [ 0 => "www.corspedia.com" ] "content-length" => array:1 [ 0 => "" ] "content-type" => array:1 [ 0 => "" ] ]
        request_server
        0 of 0
        array:50 [ "USER" => "www-data" "HOME" => "/var/www" "HTTP_SEC_CH_UA_MOBILE" => "?0" "HTTP_SEC_CH_UA" => ""HeadlessChrome";v="129", "Not=A?Brand";v="8", "Chromium";v="129"" "HTTP_CACHE_CONTROL" => "no-cache" "HTTP_PRAGMA" => "no-cache" "HTTP_CDN_LOOP" => "cloudflare; loops=1" "HTTP_PRIORITY" => "u=0, i" "HTTP_UPGRADE_INSECURE_REQUESTS" => "1" "HTTP_USER_AGENT" => "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)" "HTTP_CF_CONNECTING_IP" => "18.118.51.153" "HTTP_ACCEPT" => "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7" "HTTP_SEC_FETCH_SITE" => "none" "HTTP_CF_VISITOR" => "{"scheme":"https"}" "HTTP_SEC_FETCH_MODE" => "navigate" "HTTP_SEC_FETCH_USER" => "?1" "HTTP_X_FORWARDED_PROTO" => "https" "HTTP_CF_IPCOUNTRY" => "US" "HTTP_ACCEPT_ENCODING" => "gzip, br" "HTTP_SEC_FETCH_DEST" => "document" "HTTP_SEC_CH_UA_PLATFORM" => ""Windows"" "HTTP_X_FORWARDED_FOR" => "18.118.51.153" "HTTP_CF_RAY" => "90fec16888b2f157-ORD" "HTTP_HOST" => "www.corspedia.com" "REDIRECT_STATUS" => "200" "SERVER_NAME" => "corspedia.com" "SERVER_PORT" => "443" "SERVER_ADDR" => "141.95.147.152" "REMOTE_USER" => "" "REMOTE_PORT" => "22110" "REMOTE_ADDR" => "172.70.131.154" "SERVER_SOFTWARE" => "nginx/1.18.0" "GATEWAY_INTERFACE" => "CGI/1.1" "HTTPS" => "on" "REQUEST_SCHEME" => "https" "SERVER_PROTOCOL" => "HTTP/2.0" "DOCUMENT_ROOT" => "/var/www/corspedia/public" "DOCUMENT_URI" => "/index.php" "REQUEST_URI" => "/ar/%D8%A7%D9%84%D8%AF%D9%88%D8%B1%D8%A7%D8%AA/designing-with-generative-ai-course-%28how-to%29-%7C-treehouse" "SCRIPT_NAME" => "/index.php" "CONTENT_LENGTH" => "" "CONTENT_TYPE" => "" "REQUEST_METHOD" => "GET" "QUERY_STRING" => "" "SCRIPT_FILENAME" => "/var/www/corspedia/public/index.php" "PATH_INFO" => "" "FCGI_ROLE" => "RESPONDER" "PHP_SELF" => "/index.php" "REQUEST_TIME_FLOAT" => 1739218361.937 "REQUEST_TIME" => 1739218361 ]
        request_cookies
        []
        
        response_headers
        0 of 0
        array:5 [ "content-type" => array:1 [ 0 => "text/html; charset=UTF-8" ] "cache-control" => array:1 [ 0 => "no-cache, private" ] "date" => array:1 [ 0 => "Mon, 10 Feb 2025 20:12:42 GMT" ] "set-cookie" => array:2 [ 0 => "XSRF-TOKEN=eyJpdiI6InVNQVo2UDNXR3ZIQVgzV21GeSs1RlE9PSIsInZhbHVlIjoiRkw0YTVoM3VZd0p4bGxJVGJqbi9HS1FoY2ttMzRuTldzUGVPWGZLWkxoeHR2aWhkMEY3cVU0UDd5eGNKemgzVVFQL1U4RnY5amE4WHQvR1FNSFVJTGF6TlhUOTN3QWRhZHYyaU5zc1dzd1JqUVlZamU1QVRzVnExVTlENERMbFAiLCJtYWMiOiI5ZTRkZjMxZGJjZWJlMTEyMWI1OGU1ZWQyYjRmMzAyN2ZmODRhNTBkOTMyZDIwOGMzNjM4OWU5YzJiOGJhNzQzIiwidGFnIjoiIn0%3D; expires=Mon, 10 Feb 2025 22:12:42 GMT; Max-Age=7200; path=/; samesite=laxXSRF-TOKEN=eyJpdiI6InVNQVo2UDNXR3ZIQVgzV21GeSs1RlE9PSIsInZhbHVlIjoiRkw0YTVoM3VZd0p4bGxJVGJqbi9HS1FoY2ttMzRuTldzUGVPWGZLWkxoeHR2aWhkMEY3cVU0UDd5eGNKemgzVVFQL1U4R" 1 => "laravel_session=eyJpdiI6IkZHVkJDYTdRMXhsVVRsV0l4ZkJqNmc9PSIsInZhbHVlIjoiUEhJaU5SaUllczBvVTR2czBYbUdYOEdNa3dTcTFaaGg2OEttcnpVSFdrdXpocTV2YXJBaDgvS3NvdWg0MkZyRXR1b0NIZUJjbHZ1T1NIRWtQN3NlUWt0OEdjSUhtTmZaaCtRK1ozam5LTVJoQzh5TUtjbGZMeG9OUTd2Vm84aEwiLCJtYWMiOiIzZTZjOTczMzYzZWUzMDVkY2NiM2M5ZmE1NmJlNzMyYTc0Y2I3ZDI1M2I0MGRmZjI1ZDQ3MTA4ODAyYjAxZmUyIiwidGFnIjoiIn0%3D; expires=Mon, 10 Feb 2025 22:12:42 GMT; Max-Age=7200; path=/; httponly; samesite=laxlaravel_session=eyJpdiI6IkZHVkJDYTdRMXhsVVRsV0l4ZkJqNmc9PSIsInZhbHVlIjoiUEhJaU5SaUllczBvVTR2czBYbUdYOEdNa3dTcTFaaGg2OEttcnpVSFdrdXpocTV2YXJBaDgvS3NvdWg0MkZyRXR1" ] "Set-Cookie" => array:2 [ 0 => "XSRF-TOKEN=eyJpdiI6InVNQVo2UDNXR3ZIQVgzV21GeSs1RlE9PSIsInZhbHVlIjoiRkw0YTVoM3VZd0p4bGxJVGJqbi9HS1FoY2ttMzRuTldzUGVPWGZLWkxoeHR2aWhkMEY3cVU0UDd5eGNKemgzVVFQL1U4RnY5amE4WHQvR1FNSFVJTGF6TlhUOTN3QWRhZHYyaU5zc1dzd1JqUVlZamU1QVRzVnExVTlENERMbFAiLCJtYWMiOiI5ZTRkZjMxZGJjZWJlMTEyMWI1OGU1ZWQyYjRmMzAyN2ZmODRhNTBkOTMyZDIwOGMzNjM4OWU5YzJiOGJhNzQzIiwidGFnIjoiIn0%3D; expires=Mon, 10-Feb-2025 22:12:42 GMT; path=/XSRF-TOKEN=eyJpdiI6InVNQVo2UDNXR3ZIQVgzV21GeSs1RlE9PSIsInZhbHVlIjoiRkw0YTVoM3VZd0p4bGxJVGJqbi9HS1FoY2ttMzRuTldzUGVPWGZLWkxoeHR2aWhkMEY3cVU0UDd5eGNKemgzVVFQL1U4R" 1 => "laravel_session=eyJpdiI6IkZHVkJDYTdRMXhsVVRsV0l4ZkJqNmc9PSIsInZhbHVlIjoiUEhJaU5SaUllczBvVTR2czBYbUdYOEdNa3dTcTFaaGg2OEttcnpVSFdrdXpocTV2YXJBaDgvS3NvdWg0MkZyRXR1b0NIZUJjbHZ1T1NIRWtQN3NlUWt0OEdjSUhtTmZaaCtRK1ozam5LTVJoQzh5TUtjbGZMeG9OUTd2Vm84aEwiLCJtYWMiOiIzZTZjOTczMzYzZWUzMDVkY2NiM2M5ZmE1NmJlNzMyYTc0Y2I3ZDI1M2I0MGRmZjI1ZDQ3MTA4ODAyYjAxZmUyIiwidGFnIjoiIn0%3D; expires=Mon, 10-Feb-2025 22:12:42 GMT; path=/; httponlylaravel_session=eyJpdiI6IkZHVkJDYTdRMXhsVVRsV0l4ZkJqNmc9PSIsInZhbHVlIjoiUEhJaU5SaUllczBvVTR2czBYbUdYOEdNa3dTcTFaaGg2OEttcnpVSFdrdXpocTV2YXJBaDgvS3NvdWg0MkZyRXR1" ] ]
        session_attributes
        0 of 0
        array:5 [ "_token" => "RJaD0DjrcZ5bsa1vmIqNDTUcRdQHViF1pwbtvKyi" "locale" => "ar" "_previous" => array:1 [ "url" => "https://www.corspedia.com/ar/%D8%A7%D9%84%D8%AF%D9%88%D8%B1%D8%A7%D8%AA/designing-with-generative-ai-course-%28how-to%29-%7C-treehouse" ] "_flash" => array:2 [ "old" => [] "new" => [] ] "PHPDEBUGBAR_STACK_DATA" => [] ]